<template>
  <t-breadcrumb :max-item-width="'150'" separator="/" class="tdesign-breadcrumb">
    <t-breadcrumbItem v-for="item in crumbs" :key="item.to" :to="item.to">
      <template #icon>
        <div v-if="item.icon" class="icon-wrap" :class="{ home: item.icon === 'menu-home' }">
          <svg-icon class="icon" :name="item.icon"></svg-icon>
        </div>
      </template>
      {{ item.title }}
    </t-breadcrumbItem>
  </t-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';

import { useLocale } from '@/locales/useLocale';
import { RouteMeta } from '@/types/interface';

const { locale } = useLocale();

const crumbs = computed(() => {
  const route = useRoute();

  const pathArray = route.path.split('/');
  pathArray.shift();

  const breadcrumbs = pathArray.reduce((breadcrumbArray, path, idx) => {
    // 如果路由下有hiddenBreadcrumb或当前遍历到参数则隐藏
    const meta = route.matched[idx]?.meta as RouteMeta;
    if (meta?.hiddenBreadcrumb || Object.values(route.params).includes(path)) {
      return breadcrumbArray;
    }
    let title = path;
    if (meta?.title) {
      if (typeof meta.title === 'string') {
        title = meta.title;
      } else {
        title = meta.title[locale.value];
      }
    }
    breadcrumbArray.push({
      path,
      to: breadcrumbArray[idx - 1] ? `/${breadcrumbArray[idx - 1].path}/${path}` : `/${path}`,
      title,
      icon: meta.icon,
    });

    return breadcrumbArray;
  }, []);

  // 加home
  breadcrumbs.unshift({ to: '/', icon: 'menu-home', title: '' });

  return breadcrumbs;
});
</script>
<style lang="less" scoped>
.tdesign-breadcrumb {
  margin-top: 8px;
  height: 34px;
  background-color: #fff;
  padding-left: 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(160 174 192 / 60%);

  .icon-wrap {
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: transparent;
    margin-right: 6px;

    &.home {
      background: rgb(1 119 251 / 10.2%);

      .icon {
        width: 12px;
        height: 12px;
      }
    }

    .icon {
      width: 14px;
      height: 14px;
      color: #3d3d3d;
    }
  }

  :deep(.t-breadcrumb__item) {
    &:last-child {
      .icon-wrap {
        .icon {
          color: #0f64ff;
        }
      }

      .t-breadcrumb__inner-text {
        color: #0f64ff;

        &::after {
          background-color: #0f64ff;
        }
      }
    }

    & + .t-breadcrumb__item {
      .t-breadcrumb__separator {
        padding-left: 16px;
      }
    }

    .t-breadcrumb__separator {
      color: #333;
      font-size: 14px;
      margin-right: 9px;
    }

    .t-breadcrumb__inner-text {
      color: #333;
      font-size: 12px;
      position: relative;

      &::after {
        content: '';
        width: 100%;
        height: 1px;
        background-color: #333;
        position: absolute;
        bottom: 2px;
        left: 0;
        z-index: 11;
      }
    }
  }
}
</style>
